Hexo博客部署

发表于   |   分类于

之前在VPS上使用Hexo自带的nodejs server部署博客，总觉得不便，每次更新文章的步骤较为繁琐，需要ftp或scp发送文章到VPS，再登录ssh进行手动部署；同时发现github.io上的免费hosting可以用来作为备份，步骤又多了一步。因此琢磨着如何一步到位，写就此文记录探索过程。

Why

  • 原场景：
    1. 在本机写文章
    2. 将本机的文章传到VPS
    3. ssh登陆到VPS
    4. 在VPS的hexo博客文件夹里hexo g + hexo s
  • 新场景：
    1. 在本机写文章，保存到hexo博客文件夹的source/_posts目录下
    2. 在本机的hexo博客文件夹里hexo g + hexo d
    3. (自动) hexo-git-deployer将public文件夹中的内容push到VPS的本地git仓库
    4. (自动) VPS的本地git仓库的post-receive hook被触发，这个脚本：
      • 清空本地临时git仓库
      • 本地git仓库clone到本地临时git仓库
      • 清空NginX设置里project的文件夹
      • 将本地临时git仓库中的内容复制到project文件夹
    5. (自动) hexo-git-deployer将public文件夹中的内容push到github的hosting

What

  • 本机
    1. Markdown写作环境
    2. nodejs环境
    3. hexo环境
    4. git环境
    5. ssh key生成
  • VPS
    1. Web server NginX
    2. git环境
    3. 保存ssh key
  • github
    1. 保存ssh key
    2. git仓库

How

Prerequisites

本机

  • nodejs

    1. 从nodejs官网下载并安装
    2. 验证
      1
      2
      node -v
      npm -v

  • git

    1. 从git官网下载并安装

    2. 验证

      1
      git --version

  • hexo

    1
    npm install hexo-cli -g

  • hexo git deployer

    1
    npm install hexo-deployer-git --save

  • ssh key

    1. 生成key

      1
      2
      3
      4
      5
      ssh-keygen -t rsa -b 4096 -C [user]@[domain]
      [press enter] //默认位置~/.ssh
      [press enter] //key不需要密码保护
      [press enter] //确认不需要密码保护
      # 使用-C添加comment是为了ssh到VPS, user为VPS上的用户名，domain为localhost

    2. 添加key

      1
      ssh-add

    3. 复制key内容到剪贴板

      1
      cat ~/.ssh/id_rsa.pub

VPS

  • NginX

    1. 安装

      1
      apt-get install nginx-full

    2. 验证

      1
      2
      nginx -v
      /etc/init.d/nginx status

  • git

    1. 安装

      1
      apt-get install git

    2. 验证

      1
      git --version

  • ssh key

    1. 添加
      ssh key是认用户的，用户之间不共享key，因此在对应用户home路径下的.ssh隐藏文件夹中，将key内容复制到authorized_keys文件中，如果没有这个文件则先创建

      1
      2
      3
      4
      nano ~/.ssh/authorized_keys

      # 拷贝key内容
      ssh-rsa [key content] [user]@[domain]

    2. 验证

      1
      ssh {-p [port]} [user]@[domain]

github

  • ssh key

    1. 添加
      在github的个人设置里选择New SSH key，复制key内容到’key’框里保存即可
    2. 验证
      1
      2
      3
      4
      5
      ssh github.com

      # 显示以下内容说明配置正确
      Hi [github username]! You've successfully authenticated, but GitHub does not provide shell access.
      Connection to github.com closed.

  • github.io仓库
    在github上新建一个名为[用户名].github.io的仓库即可

配置

VPS

  • ssh配置

    1. 配置文件

      1
      nano /etc/ssh/sshd_config

    2. 配置内容

      1
      2
      3
      4
      5
      port [非21端口]
      RSAAuthentication yes
      PubkeyAuthentication yes
      #AuthorizedKeysFile %h/.ssh/authorized_keys 不需uncomment，默认就是此路径
      PasswordAuthentication no

    3. 重启sshd

      1
      /etc/init.d/ssh restart

  • NginX配置

    1. 检查配置文件的语法错误，同时获取配置文件的路径

      1
      nginx -t

    2. 创建站点映射配置文件

      1
      2
      3
      cd /etc/nginx/sites-available
      mv default default.save
      touch sites

    3. 配置站点映射配置文件
      这里用一个最简单的静态映射示例，domain为一级或二级域名（需先在域名商处配置好A记录），root directory为根目录，也就是需要将hexo博客的public文件夹中的内容拷贝过去的路径

      1
      2
      3
      4
      5
      6
      7
      8
      server {
              listen 80;
              server_name [domain];
              root [root directory];
              index index.html;
              location / {
              }
      }

    4. 在sites-enabled文件夹中创建映射配置文件的软链接

      1
      2
      rm /etc/nginx/sites-enabled/*
      ln -s /etc/nginx/sites-available/sites /etc/nginx/sites-enabled/sites

    5. 重启NginX

      1
      /etc/init.d/nginx restart

  • git仓库及git hook配置

    • 内容经由本机->blog.git->blog_tmp->blog_public

      1
      2
      3
      4
      5
      6
      7
      8
      cd
      mkdir blog.git
      mkdir blog_tmp
      mkdir blog_public
      cd blog.git
      git init --bare
      cd hooks
      nano post-receive

    • 脚本内容

      1. 删除blog_tmp文件夹中的内容
      2. blog.git git clone到blog_tmp文件夹
      3. copy blog_tmp文件夹中的内容到blog_public
        1
        2
        3
        4
        5
        6
        7
        8
        #!/bin/bash -l
        GIT_REPO=/home/[user]/blog.git
        TMP_GIT_CLONE=/home/[user]/blog_tmp
        PUBLIC_WWW=/home/[user]/blog_public
        rm -rf ${TMP_GIT_CLONE}
        git clone $GIT_REPO $TMP_GIT_CLONE
        rm -rf ${PUBLIC_WWW}/*
        cp -rf ${TMP_GIT_CLONE}/* ${PUBLIC_WWW}

本机

  • 生成hexo博客文件夹

    1
    2
    3
    cd
    hexo init [文件夹名]
    cd [文件夹名]

  • 修改_config.yml

    1
    2
    3
    4
    5
    6
    7
    8
    9
    nano _config.yml
    # 配置内容
    deploy:
    - type: git
      repo: git@github.com:[用户名]/[用户名].github.io.git
      branch: master
    - type: git
      repo: ssh://[user]@[domain]:[ssh port]/[git仓库路径,此例为"~/blog.git"]
      branch: master

  • 本地测试
    文章摘要由内容为”more”的html注释界定，但是如下注释会解析错误：

    1
    <!--more-->

    需要在more的左右添加空格才行：

    1
    <!-- more -->

    将文章放入[hexo路径]/source/_posts后，生成静态文件，接着使用默认的nodejs http server本地发布一下检查内容、格式等是否OK

    1
    2
    hexo g
    hexo s
    • 修改默认端口
      1
      2
      3
      4
      5
      6
      7
      8
      nano /hexo/node_modules/hexo-server/index.js

      # 端口配置
      hexo.config.server = assign({
        port: 4000,
        log: false,
        ip: '0.0.0.0'
      }, hexo.config.server);

  • Here we go

    1
    hexo d